<template>
  <div>
    <p style="text-align: center;font-size:20px;margin-top: -10px;margin-bottom: -30px">结果树</p>
    <el-dialog title="报告详情如下：" :visible.sync="dialogFormVisible3" width="90%">
                    <el-collapse v-for="i in apis_result">
                          <el-collapse-item title="一致性 Consistency" name="1">
                              <template slot="title">
                                  <strong :style="{color:getColor(i.result)}">{{ i.label }}</strong>
                              </template>
                              <span style="color:grey">【接口结果】</span><strong> {{i.result}} </strong> <br>
                              <span style="color:grey">【HttpStatus】</span><strong> {{i.status_code}} </strong> <br>
                              <span style="color:grey">【请求类型】</span><strong> {{i.method}} </strong> <br>
                              <span style="color:grey">【请求url】</span><strong> {{i.url}} </strong> <br>
                              <span style="color:grey">【请求头】</span><strong> {{i.request_headers}} </strong> <br>
                              <span style="color:grey">【请求体类型】</span><strong> {{i.payload_method}} </strong> <br>
                              <span style="color:grey">【配置执行结果】</span><strong> {{i.CR}} </strong> <br>
                              <span style="color:grey">【变量提取结果】</span><strong> {{i.TQ}} </strong> <br>
                              <span style="color:grey">【请求体raw类型】</span><strong> {{i.payload_raw_method}} </strong> <br>
                              <span style="color:grey">【请求体】</span><strong> {{i.payload}} </strong> <br>
                              <span style="color:grey">【返回体】</span><strong> {{i.R}} </strong> <br>
                              <span style="color:grey">【返回头】</span><strong> {{i.response_headers}} </strong> <br>
                          </el-collapse-item>
                    </el-collapse>
                </el-dialog>
    <el-button style="float: right" type="danger" @click="clear_all_reports">清空</el-button>
    <el-table :data="all_reports" stripe style="max-width: 100%;max-height: 500px">
      <el-table-column label="报告ID" width="100px" >
              <template slot-scope="scope">
                <span> {{scope.row.id}}</span>
              </template>
      </el-table-column>
      <el-table-column label="报告时间" width="200px" >
              <template slot-scope="scope">
                <span> {{scope.row.create_time}}</span>
              </template>
      </el-table-column>
      <el-table-column label="结果树" width="200px" >
              <template slot-scope="scope">
                <span :style="{color:getColor(scope.row.all_result)}"> {{scope.row.all_result}}</span>
              </template>
      </el-table-column>
      <el-table-column >
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="look_report_data(scope.$index)">详情</el-button>
              </template>
      </el-table-column>
        </el-table>

  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Report",
  data(){
    return{
      apis_result:[],
      dialogFormVisible3:false,
      all_reports:[],

    }
  },
  mounted() {
            axios.get('http://localhost:8000/get_all_reports/',{params:{
            pro_ject_id:this.pro_ject_id
            }}).then(res=>{this.all_reports=res.data})
          console.log(this.all_reports)
  },
  methods:{
           clear_all_reports(){
          axios.get('http://localhost:8000/clear_all_reports/',{params:{
            pro_ject_id:this.pro_ject_id
            }}).then(res=>{this.all_reports=[]

          })
        },
           look_report_data(index){
          this.apis_result=[]
          this.dialogFormVisible3=true
          this.apis_result=this.all_reports[index].apis_result
          console.log(this.apis_result)
        },
           getColor(result){
          if(result.toString()=='true'){
            return 'green'
          }else {
            return 'red'
          }
        },

  },
  props:['pro_ject_id',]

}
</script>

<style scoped>

</style>